<template>
  <div class="w">
    <div class="title">
      <div class="title_left">
        <el-input class="title_left_input" @focus="search"></el-input>
        <el-button class="title_left_button">搜索</el-button>
      </div>
      <div class="title_right" @click="login" v-if="token == null">
        <i class="iconfont icon-denglu"></i>
        <span>登录</span>
      </div>
    </div>
    <div class="info">
      <div class="info_top">
        <el-card>
          <div class="card_title">
            <div class="card_title_left">校园公告</div>
            <div class="card_title_right" @click="checkMore(1)">查看更多</div>
          </div>
          <div class="card_info">
            <el-table :data="tableDateNotice" @row-click="getNoticeId" style="width: 100%" :show-header="false">
              <el-table-column width="223">
                <template slot-scope="scope">
                  <span class="card_info_text">{{ scope.row.title }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="createTime[0]" width="99"> </el-table-column>
            </el-table>
          </div>
        </el-card>
        <el-card>
          <div class="card_title">
            <div class="card_title_left">校园兼职</div>
            <div class="card_title_right" @click="checkMore(2)">查看更多</div>
          </div>
          <div class="card_info">
            <el-table :data="tableDateJob" @row-click="getJobId" style="width: 100%" :show-header="false">
              <el-table-column width="223">
                <template slot-scope="scope">
                  <span class="card_info_text">{{ scope.row.jobName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="createTime[0]" width="99"> </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      <div class="info_bottom">
        <el-card v-for="(item, index) in shopList" :key="index">
          <div @click="goShop(item.id)">
            <div class="card_bottom">
              <div class="card_bottom_img">
                <el-image style="width: 100%; height: 100%" :src="item.shopImage" fit="cover"></el-image>
              </div>
              <div class="card_bottom_title">
                <span>{{ item.shopName }}</span>
              </div>
              <div class="card_bottom_info">
                <span>{{ item.score }}分</span>
                <span class="card_bottom_info_line">|</span>
                <span>月销{{ item.sales }}</span>
              </div>
              <div class="card_bottom_sale">
                <el-tag color="#FF4F1E" size="mini">{{ item.discounts }}</el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <v-nav></v-nav>
  </div>
</template>

<script>
import nav from '../components/nav.vue';
export default {
  data() {
    return {
      tableDateNotice: [],
      tableDateJob: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 3,
        qurey: '',
      },
      shopList: [],
      token: '',
      info: [],
    };
  },

  components: {
    'v-nav': nav,
  },

  created() {
    this.info = JSON.parse(localStorage.getItem('userInfo'));
    this.getNoticeList();
    this.getJobList();
    this.getShopList();
    this.token = sessionStorage.getItem('token');
  },

  methods: {
    async goShop(shopId) {
      this.$router.push({ path: '/shop', query: { shopId: shopId } });
      const { data: res } = await this.$http.put('shop/updateRate/' + shopId);
      if (res.code == 1) {
        return;
      }
    },
    login() {
      this.$router.push('/login');
    },
    async getNoticeList() {
      const { data: res } = await this.$http.get('notice/getNoticeList', { params: this.pageInfo });
      if (res.code == 1) {
        this.tableDateNotice = res.data.records;
        for (let i = 0; i < this.tableDateNotice.length; i++) {
          this.tableDateNotice[i].createTime = this.tableDateNotice[i].createTime.split(' ');
        }
      } else {
        return this.$message.error('信息获取失败');
      }
    },
    getNoticeId(row) {
      this.$router.push({ path: '/noticeDetails', query: { noticeId: row.id } });
    },
    getJobId(row) {
      this.$router.push({ path: '/jobDetails', query: { jobId: row.id } });
    },
    //获取job列表
    async getJobList() {
      const { data: res } = await this.$http.get('job/getJobList', {
        params: this.pageInfo,
      });
      if (res.code == 1) {
        this.tableDateJob = res.data.records;
        for (let i = 0; i < this.tableDateJob.length; i++) {
          this.tableDateJob[i].createTime = this.tableDateJob[i].createTime.split(' ');
        }
      } else {
        return this.$message.error('信息获取失败');
      }
    },
    async getShopList() {
      const { data: res } = await this.$http.get('shop/getAllShopList', { params: this.pageInfo });
      if (res.code == 1) {
        this.shopList = res.data;
        return;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
    search() {
      this.$router.push('/search');
    },
    checkMore(num) {
      if (num == 1) {
        this.$router.push('/notice');
        return;
      }
      if (num == 2) {
        this.$router.push('/job');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  background: linear-gradient(to top, #f4f4f4, 80%, #f8d347);
  .title {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title_left {
      margin-left: 15px;
      display: flex;
      flex: 1;
      background-color: #ffffff;
      border-radius: 50px;
      align-items: center;
      margin-right: 15px;
      .title_left_input {
        :deep(.el-input__inner) {
          border-radius: 50px;
          border: none;
        }
      }
      .el-button,
      .el-button.is-round {
        padding: 7px 15px;
      }
      .title_left_button {
        border-radius: 50px;
        margin-right: 5px;
        height: 30px;
        width: 60px;
        background-color: #f9dc50;
        font-size: 15px;
      }
    }
    .title_right {
      text-align: center;
      margin-right: 15px;
      .icon-denglu {
        display: block;
      }
      span {
        font-size: 14px;
      }
    }
  }
  .info {
    height: 730px;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    .info_top {
      height: 420px;
      .el-card {
        margin: 10px 13px;
        height: 200px;
        border-radius: 15px;
        .card_title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .card_title_left {
            margin-bottom: 5px;
            font-weight: bold;
          }
          .card_title_right {
            font-size: 13px;
          }
        }
        .card_info {
          height: 160px;
          overflow: auto;
          .card_info_text {
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .info_bottom {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;

      height: 300px;

      .el-card {
        width: 175px;
        height: 200px;
        margin-bottom: 10px;
        border-radius: 15px;
        :deep(.el-card__body) {
          padding: 0px;
        }
        .card_bottom {
          height: 100%;
          width: 100%;
          .card_bottom_img {
            height: 120px;
            width: 175px;
            img {
              height: 100%;
              width: 100%;
            }
          }
          .card_bottom_title {
            font-size: 15px;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 5px 10px;
          }
          .card_bottom_info {
            font-size: 12px;
            margin: 5px 10px;
            color: #a6a6a6;
            .card_bottom_info_line {
              margin-left: 5px;
              margin-right: 5px;
            }
          }
          .card_bottom_sale {
            margin: 5px 10px;
            color: #ffffff;
            .el-tag--mini {
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}
</style>